import {
  nxValidator
} from '../../components/nx-validator';

module.exports = Behavior({
  behaviors: ['wx://form-field'],
  properties: {
    /** 之所以将所有信息以对象的方式传入，是为了后面的数据验证 */
    props: {
      type: Object,
      observer(props) {
        if (props) {
          this.setData({
            label: props.label,
            required: props.required,
            pattern: props.pattern || '',
            errorMessage: props.errorMessage || '',
            placeholder: (props.placeholder || '请输入' + props.label) + (props.required ? '（必填）' : ''),
          });
        }
      }
    },
    value: {
      type: null,
      value: '',
    },
    // 是否展示分割线
    showDivider: {
      type: Boolean,
      value: true,
    },
    // 字段说明信息
    tip: {
      type: String,
      value: "",
    },
    // 是否为Label标签
    isLabel: {
      type: Boolean,
      value: false,
    },
    // 是否展示字段左侧的图标
    leftIcon: {
      type: Boolean,
      value: false,
    },
  },
  data: {
    // 标签名
    label: '',
    // 是否必填
    required: false,
    // 占位符
    placeholder: '',
    // 验证模式
    pattern: '',
    // 是否展示该字段（用于动态字段）
    isShow: true,
    // 是否当前在操作
    current: false,
    // 错误提示
    errorMessage: '',
    // 当前值，用于给input等微信组件赋值
    // 这里之所以加一个currentValue，是用来解决输入验证时内容闪烁的问题
    currentValue: '',
    // value值是否来源于属性
    valueFromProp: true,
  },
  methods: {
    input: function (e) {
      const v = e.detail.value;
      const d = this.data;

      // 给组件赋值，不然提交表单时没有值
      // 从验证函数中提出来，是由于验证可能导致赋值延迟
      this.setData({
        value: v,
        valueFromProp: false,
      });

      // 验证数据
      nxValidator(d, v, false).then(() => {
        this.setData({
          errorMessage: d.errorMessage,
        });
      });
    },
    blur: function (e) {
      const v = e.detail.value;
      const d = this.data;

      // 给组件赋值，不然提交表单时没有值
      // 从验证函数中提出来，是由于验证可能导致赋值延迟
      this.setData({
        value: v,
        valueFromProp: false,
      });

      // 验证数据
      nxValidator(d, v).then(() => {
        this.setData({
          errorMessage: d.errorMessage,
          current: false,
        });
      });

      this.triggerEvent("change", e.detail);
    },
    focus() {
      this.setData({
        current: true,
      });
    },
  },
})